<template>
  <div style="width: 100%">
    <template v-if="currentDataList  && currentDataList.length > 0">
      <el-steps v-if="mode === 'edit'" :active="value" :direction="direction" :align-center="isAlignCenter"
        :simple="isSimple" :finish-status="finishStatus">
        <el-step v-for="(item, index) in currentDataList" :title="item.label" :key="index">
        </el-step>
      </el-steps>
      <div v-else></div>
    </template>
    <el-steps v-else :active="active" :direction="direction" :simple="isSimple" :align-center="isAlignCenter"
      :finish-status="finishStatus">
      <el-step title="步骤 1"></el-step>
      <el-step title="步骤 2"></el-step>
      <el-step title="步骤 3"></el-step>
    </el-steps>
  </div>
</template>
<script>
import datasource from '../../mixins/steps-datasource'
export default {
  name: "steps",
  mixins: [datasource],
  props: {
    value: '',
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    active: {
      type: Number,
      default: 0,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    direction: "",
    isAlignCenter: {
      type: Boolean,
      default: false,
    },
    isSimple: {
      type: Boolean,
      default: false,
    },
    stepsdata: {
      type: Array,
      default() {
        return []
      },
    },
    finishStatus:{},
  },
  data() {
    return {
      currentDataList:[]
    }
  },
  computed: {
   
  },
  watch:{
    options:{
      immediate:true,
      deep: true,
      handler(val){
        if(val && val.length){
          this.currentDataList = val.map(item=>{
            return {
              value:item.value,
              label:item.label
            }
          })
        }
      }
    }
  },
  mounted() {
   
  },
  methods: {

  },
}
</script>
